<template>
	<view>
		<nav-box :title="type == 1 ? '考生详情' : '考生成绩'"></nav-box>
		<view class="content">
			<view class="examinee-info">
				<view class="title">考生信息</view>
				<view class="info-box">
					<text>考生姓名：{{info.name}}</text>
					<text>考生账号：{{info.userName}}</text>
					<text>开始时间：{{info.startTime}}</text>
					<text>答卷用时：{{info.useTime}}分钟</text>
					<text>作弊次数：{{info.count}}</text>
					<text>考试得分：{{info.score}}</text>
					<text>考试评价：{{info.evaluate}}</text>
				</view>
			</view>
			<view class="control-box">
				<view class="title">操作考生</view>
				<view :class="['control-list', type == 2 ? 'achievement' : '']">
					<view class="control-item" v-for="(item, index) in controlList" :key="index"
						@click="control(index)">
						<image :src="item.img" mode=""></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal :title="modalTitle" v-model="show" :show-cancel-button="true" cancel-color="#2979ff" @confirm="modalConfirm">
			<view class="wrap">
				<text v-show="modalTitle == ''">{{content}}</text>
				<view class="add-box" v-show="modalTitle != ''">
					<input type="number" maxlength="2" placeholder="输入时长，最多20分钟" adjust-position v-model="addTime">
					<text>分钟</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				show: false,
				modalTitle: '',
				content: '',
				current: null,
				info: {},
				controlList: [{
						text: '补时',
						img: '../../../static/images/bushi.png'
					},
					{
						text: '重考',
						img: '../../../static/images/zhongkao.png'
					},
					{
						text: '强制交卷',
						img: '../../../static/images/qiangzhijiaojuan.png'
					},
					{
						text: '取消预约',
						img: '../../../static/images/quxiaoyuyue.png',
					}
				],
				addTime: null,
				
			};
		},
		onLoad(options) {
			this.type = options.type
			if (options.type == 2) {
				this.controlList = [
					{
						text: '查看试卷',
						img: '../../../static/images/chakanshijuan.png',
					},
					{
						text: '取消成绩',
						img: '../../../static/images/quxiaochengji.png',
					}
				]
			}
			// 走获取考生信息接口替换info数据
			this.info = {
				name: '张三',
				userName: '13322332233',
				startTime: '2021/05/21 13:10',
				useTime: 20,
				count: 0,
				score: 99,
				evaluate: '优秀'
			}
		},
		methods: {
			control(index) {
				this.current = index
				this.modalTitle = ''
				this.content = ''
				if (this.type == 1) {
					this.show = true
					if (index == 0) {
						this.modalTitle = '添加时长'
					}
					this.content = index == 1 ? '您确定要此考生重新开始考试吗' : index == 2 ? '您确定要强制停止该考生答卷吗' : index == 3 ? '您确定要取消此考生的预约吗' : ''	
				} else {
					if (index == 1) {
						this.show = true
						this.content = '您确认取消此考生的成绩吗'
					} else {
						// 传入考生id
						uni.navigateTo({
							url: '../testPaper/testPaper'
						})
					}
				}
			},
			modalConfirm() {
				if (this.type == 1) {
					// this.current  0 增加时长  1 重考  2 强制交卷  3 取消预约
					//走增加时长接口时  用户输入的时长值为 this.addTime
				} else {
					if (this.current == 1) {
						// 走呀取消成绩接口
						
					} else {
						
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;

		.examinee-info {
			padding: 40upx 32upx;
			color: #969696;
			border-bottom: 12upx solid #F7F7F9;

			.title {
				color: #4B4B4B;
				margin-bottom: 32upx;
			}

			.info-box {
				text {
					display: inline-block;
					width: 100%;

					&:not(:last-child) {
						margin-bottom: 20upx;
					}
				}
			}
		}
		.control-box {
			padding: 48upx 40upx;
			border-bottom: 12upx solid #f7f7f9;
			color: #4b4b4b;
			.title {
				display: inline-block;
				margin-bottom: 24upx;
			}
			.achievement {
				justify-content: start !important;
				.control-item {
					margin-right: 70upx;
				}
			}
			.control-list {
				display: flex;
				justify-content: space-between;
				text-align: center;
				image {
					width: 80upx;
					height: 80upx;
					margin-bottom: 16upx;
				}
				.control-item {
					text {
						display: block;
						color: #a4a4a4;
						font-size: 22upx;
					}
				}
			}
		}
	}
	.wrap {
		padding: 30upx 0;
		text-align: center;
		.add-box {
			justify-content: center;
			display: flex;
			align-items: center;
			input {
				height: 80upx;
				background-color: #F2F2F2;
				text-align: center;
				width: 50%;
				font-size: 24upx;
				border-radius: 100upx;
				padding: 0 30upx;
				margin-right: 20upx;
			}
		}
	}
</style>
